<template>
	<view class="page">
		 <u-sticky bgColor="#fff">
			 <u-tabs :list="utabs"  @change="tabChange" :current="active" :scrollable="false"></u-tabs>
		 </u-sticky>
		 <view style="height: 40rpx;"></view>
		 <view class="block"  v-for="(item,index) in noiseData[active]" :key="index" @click="toTrain(item)">
		 	<image :src="item.icon_url" alt="" class="test-pic"></image>
		 	<view class="test-info">
		 		<view class="test-name">{{item.title}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ccc;margin-left: 10rpx;">{{parseInt(item.audio_duration/60)}}分钟</span></view>
		 		<view class="test-des">{{item.intro}}</view>
		 	</view>
		 	<view class="start">开始训练</view>
		 </view>
		 <block v-if="active==0">
			 <view class="block"  v-for="(item,index) in trains" :key="index" @click="toTrain(item)">
			 	<image :src="item.icon_url" alt="" class="test-pic"></image>
			 	<view class="test-info">
			 		<view class="test-name">{{item.title}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ccc;margin-left: 10rpx;">{{parseInt(item.audio_duration/60)}}分钟</span></view>
			 		<view class="test-des">{{item.intro}}</view>
			 	</view>
			 	<view class="start">开始训练</view>
			 </view>
		 </block>
	</view>
</template>

<script>
	const removeDuplicateObj = (arr) => {
		let obj = {};
		arr = arr.reduce((newArr, next) => {
			obj[next.audio_id] ? "" : (obj[next.audio_id] = true && newArr.push(next));
			return newArr;
		}, []);
		return arr;
	};
	export default {
		data() {
			return {
				trains:[{
					title:"自由练习",
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/card4.png",
					intro:"如果您是一位有经验的练习者并自备了训练材料， 请进行自由练习，彼馨将为您全程记录情绪数据。 ",
					audio_duration:3600,
					audio_id:'bian_0',
					location:1,
					freedom:1
				},
				{
					title:"美人技术",
					audio_id:'bian_1',
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/card3.png",
					intro:" 美人技术是动力沟通理论指导下的特有的以增进自我觉察为目的技术。美人技术是综合性的技术，强调存在、体验、行动、理解、目标和肯定这六个要素，按照这六个维度进行练习，面容和心灵会越来越美丽，越来越安详，越来越能觉察自己的内部的欲望、需要、情感和冲突，也越来越能觉察周围他人的欲望、需要、情感和冲突，与周围的人、事和环境会越来越协调、越来越有创造性。  ",
					audioUrl:"https://baxztech.com/bian_admin_api/public/audio/美人技术.mp3",
					audio_duration:420,
					location:1
				},
				{
					title:"正念冥想",
					audio_id:'bian_2',
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/train1.jpg",
					audioUrl:"https://baxztech.com/bian_admin_api/public/audio/正念冥想.mp3",
					intro:" 正念是指对当下体验的有意识的非评价的觉察，强调对此时此地实际身心感受接纳与觉知，并且鼓励不在这种接纳和觉知中加入评判。",
					audio_duration:582,
					location:1
				}],
				mxData: [],
				sfData: [],
				sqData: [],
				mxLoad: false,
				sfLoad: false,
				sqLoad: false,
				noiseData: [[],[],[]],
				active: 0,
				utabs:[
					{name:'冥想放松'},
					{name:'舒服放松'},
					{name:'睡前故事'}
				]
			};
		},
		onLoad() {
			let data = this.$store.state.trainList;
			for(let i in data){
				if(data[i].audio_type_id == 5){
					this.mxData.push(data[i])
				}
				if(data[i].audio_type_id == 6){
					this.sfData.push(data[i])
				}
				if(data[i].audio_type_id == 7){
					this.sqData.push(data[i])
				}
				this.noiseData[0] = this.mxData
				this.noiseData[1] = this.sfData
				this.noiseData[2] = this.sqData
			}
			if(this.mxLoad){
				return;
			}
			uni.$u.http.post('/client/serviceResource',{
				"data":"{\"type_id\":5,\"page_size\":5,\"page\":1}",
				"method":"heartide.bixin.audio.list"
			},{
				 header: {
					 appId:'bixin_openApi_v1',
					 appKey:'KlaWySuV_j1JcLa-X3UI'
				 }
			}).then(res => {
				if (res.code == '0') {
					let list = JSON.parse(res.data).data_list;
					if(list.length){
						this.mxLoad = true;
						this.mxData = [...this.mxData,...list];
						this.mxData = removeDuplicateObj(this.mxData);
						this.noiseData[0] = this.mxData;
					}
				}
			}).catch(e => {
				this.$toast("网络连接失败！")
			})
		},
		methods:{
			toTrain(d){
				uni.navigateTo({
					url:'/pagesA/pages/audio/audio',
					success: (res) => {
						res.eventChannel.emit('datas', d)
					}
				})
			},
			tabChange(n, t) {
				this.active = n.index;
				if (n.index == 1) {
					if(this.sfLoad){
						return;
					}
					uni.$u.http.post('/client/serviceResource',{
						"data":"{\"type_id\":6,\"page_size\":5,\"page\":1}",
						"method":"heartide.bixin.audio.list"
					},{
						 header: {
							 appId:'bixin_openApi_v1',
							 appKey:'KlaWySuV_j1JcLa-X3UI'
						 }
					}).then(res => {
						if (res.code == '0') {
							let list = JSON.parse(res.data).data_list;
							if(list.length){
								this.sfLoad = true;
								this.sfData = [...this.sfData,...list];
								this.sfData = removeDuplicateObj(this.sfData);
								this.noiseData[1] = this.sfData;
							}
						}
					}).catch(e => {
						this.$toast("网络连接失败！")
					})
				}
				if (n.index == 2) {
					if(this.sqLoad){
						return;
					}
					uni.$u.http.post('/client/serviceResource',{
						"data":"{\"type_id\":7,\"page_size\":5,\"page\":1}",
						"method":"heartide.bixin.audio.list"
					},{
						 header: {
							 appId:'bixin_openApi_v1',
							 appKey:'KlaWySuV_j1JcLa-X3UI'
						 }
					}).then(res => {
						if (res.code == '0') {
							let list = JSON.parse(res.data).data_list;
							if(list.length){
								this.sqLoad = true;
								this.sqData = [...this.sqData,...list];
								this.sqData = removeDuplicateObj(this.sqData);
								this.noiseData[2] = this.sqData;
							}
						}
					}).catch(e => {
						this.$toast("网络连接失败！")
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.block{
		background-color: #fff;
		padding: 10px;
		border-radius: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 2px 2px 8px 0px #d9ebeb;
		margin-bottom: 16px;
	}
	.test-pic {
		height: 80px;
		width: 80px;
		border-radius: 16px;
	}
	
	.test-info {
		width: 50%;
	}
	
	.test-name {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #2E2E2E;
		font-weight: bold;
		overflow-x: hidden;
	}
	
	.test-des {
		line-height: 15px;
		height: 45px;
		font-size: 12px;
		color: #969696;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	
	.start {
		width: 70px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		font-size: 12px;
		font-weight: 500;
		color: #fff;
		background-image: linear-gradient(to right, #0b2bff, #1e7fff);
	}
</style>
